<template>
	<div class="AdministrationComment">
		<HeaderTab>
			<div slot="left">
				<router-link to="/mine" class="glyphicon glyphicon-menu-left return_but"></router-link>
			</div>
			<div slot="center" class="header_center">
				管理员审核界面
			</div>
		</HeaderTab>
		<div class="NavigationTab">
			<ul>
				<li>
					<router-link to="/administratorInterface">上传作品管理</router-link>
				</li>
				<li class="active_Tab">
					<router-link to="/administrationComment">作品评论管理</router-link>
				</li>
			</ul>
		</div>
		<div class="table-responsive">
			<table class="table table-bordered table-striped">
				<thead>
					<tr>
						<th>操作序号</th>
						<th>用户名称</th>
						<th>评论内容</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="(i,k) in comments_data" :key="k">
						<td>{{i.id}}</td>
						<td>{{i.comment_user}}</td>
						<td>
							<button type="button" class="btn btn-info" @click="check_content(i,k)">查看详情</button>
						</td>
						<td>
							<button type="button" @click="adopt_comment(i,k)" class="btn btn-success Approval_btn Approval_success">通过</button>
							<button type="button" @click="refuse_comment(i,k)" class="btn btn-warning Approval_btn">拒绝</button>
						</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="mask" v-if="bol" @click="close">
			<div class="box" @click.stop="">
				<h1 class="glyphicon glyphicon-ok"></h1>
				<p class="mask_tip">{{mask_tip}}</p>
			</div>
		</div>
		<div class="mark" v-if="bml" @click="clmse">
			<div class="bmx" @click.stop="">
				<div class="mark_bookname">{{book_name}}</div>
				<h1 class="glyphicon glyphicon-pencil"></h1>
				<div><p class="mark_tip">{{mark_tip}}</p></div>
			</div>
		</div>
	</div>
</template>

<script>
	import HeaderTab from 'common/HeaderTab/HeaderTab.vue'
	
	export default{
		name: 'AdministrationComment',
		components:{
			HeaderTab
		},
		data(){
			return {
				comments_data: [],
				bol: false,
				bml: false,
				mask_tip: '',
				book_name: ''
			}
		},
		methods: {
			// 模态框1关闭事件
			close(){
				this.bol = !this.bol;
			},
			
			// 模态框2关闭事件
			clmse(){
				this.bml = !this.bml;
			},
			
			// 评论审核通过
			adopt_comment(i,k){
				this.comments_data.splice(k, 1);
				this.axios.get('http://192.168.43.169/api/comment_ApprovalAdopt/' + i.id).then((response) => {
					let _self = this;
					_self.bol = true;
					_self.mask_tip = response.data;
					// 设置一定时间后关闭提醒框
					if (_self.bol) {
						setTimeout(function() {
							_self.bol = false;
							_self.$router.go(0); //设置页面自动刷新
						}, 2000);
					}
				});
			},
			
			//评论审核拒绝
			refuse_comment(i,k){
				this.comments_data.splice(k, 1);
				this.axios.get('http://192.168.43.169/api/comment_ApprovalRefuse/' + i.id).then((response) => {
					let _self = this;
					_self.bol = true;
					_self.mask_tip = response.data;
					// 设置一定时间后关闭提醒框
					if (_self.bol) {
						setTimeout(function() {
							_self.bol = false;
							_self.$router.go(0); //设置页面自动刷新
						}, 2000);
					}
				});
			},
		
			// 查看详情按钮实现
			check_content(i,k){
				this.axios.get('http://192.168.43.169/api/bookitem/' + i.book_id).then((response) => {
					console.log()
					let _self = this;
					_self.bml = !_self.bml;
					_self.mark_tip = i.comment_content;
					_self.book_name = response.data.data[0].book_name
				});
			}
		},
		created() {
			this.axios.get('http://192.168.43.169/api/load_comment').then((response) => {
				console.log(response.data)
				for (let i = 0; i < response.data.length; i++) {
					let comment_item = {id: '', comment_user: '', comment_content: '', book_id: '', approval_id: '', }
					comment_item.id  = response.data[i].id;
					comment_item.comment_user  = response.data[i].comment_user;
					comment_item.comment_content  = response.data[i].comment_content;
					comment_item.book_id  = response.data[i].book_id;
					comment_item.approval_id  = response.data[i].approval_id;
					
					this.comments_data.push(comment_item);
				}
			});
		}
	}
</script>

<style>
	@import '~assets/css/AdministrationComment.css';
</style>
